<template>
	<div class="analy">
		<div class="analytop">
			<div class="formBox">
				<t-form v-show="!isFold" ref="form" :data="formData" :layout="'inline'" scroll-to-first-error="smooth" :class="isFold ? '' : 'paddingBottom'">
					<t-form-item label="时间范围" :label-width="68" requiredMark>
						<t-date-range-picker v-model="nowtime" :presets="presets" :disableDate="disDate" />
					</t-form-item>
					<t-form-item class="formHandleBox" v-if="!isFold">
						<t-space size="small" style="gap: 10px">
							<t-button class="resetBtn hoverLightBlue" @click="handleReset">刷新</t-button>
						</t-space>
					</t-form-item>
				</t-form>
			</div>
		</div>
		<div class="analycontent">
			<div class="overview">
				<div class="overviewitem" v-for="i in list" :key="i">
					<div>
						<span>{{ i.up }}</span>
						<div>
							{{ i.upnum }}
							<span style="margin-left: 5px">%</span>
						</div>
					</div>
					<div style="min-height: 50px">
						<span>{{ i.bottom }}</span>
						<div class="somlnum">
							{{ i.bottomnum }}
							<span style="margin-left: 5px" v-show="i.up !== '导入客户数'">%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="echartsBox">
				<div class="echartsitem">
					<div class="clalineoutcall figurebox">
						<div class="figureleft">
							<div class="figureitem onegradients">
								<div style="color: #2c4f93">
									<div class="figureitemnum">345</div>
									<div>接听名单数</div>
								</div>
								<div ref="reffigureitemtu" class="figureitemtu"></div>
							</div>
							<div class="figureitem onegradients">
								<div style="color: #3f6cce">
									<div class="figureitemnum">345</div>
									<div>A/B意向数</div>
								</div>
								<div ref="reffigureitemtutow" class="figureitemtu"></div>
							</div>
							<div class="figureitem threegradients">
								<div style="color: #4090d0">
									<div class="figureitemnum">345</div>
									<div>平均通话时长</div>
								</div>
								<div ref="reffigureitemtuthree" class="figureitemtu"></div>
							</div>
						</div>
						<div ref="refintention" class="figureright"></div>
					</div>
					<dk-divider layout="vertical" style="margin: 0 10px; height: 400px"></dk-divider>
					<div ref="refcallout" class="clalineoutcall">外呼接听数据</div>
				</div>
				<dk-divider style="margin: 10px 0"></dk-divider>
				<div class="echartsitem">
					<div ref="refrounds" class="clalineoutcall">对话轮次分布</div>
					<dk-divider layout="vertical" style="margin: 0 10px; height: 400px"></dk-divider>
					<div ref="refcallduration" class="clalineoutcall">通话时长分布</div>
				</div>
				<dk-divider style="margin: 10px 0"></dk-divider>
				<div class="echartsitem">
					<div ref="refcallstatus" class="clalineoutcall">通话状态</div>
					<dk-divider layout="vertical" style="margin: 0 10px; height: 400px"></dk-divider>
					<div ref="refcustomtags" class="clalineoutcall">自定义标签命中情况</div>
				</div>
				<dk-divider style="margin: 10px 0"></dk-divider>
				<div class="echartsitem">
					<div ref="refprocessnode" class="clalineoutcall">流程节点命中情况</div>
					<dk-divider layout="vertical" style="margin: 0 10px; height: 400px"></dk-divider>
					<div ref="refknowbase" class="clalineoutcall">知识库命中情况</div>
				</div>
				<dk-divider style="margin: 10px 0"></dk-divider>
				<div class="echartsitem">
					<div ref="refoperator" class="clalineoutcall">号码归属运营商排名（接通率）</div>
					<dk-divider layout="vertical" style="margin: 0 10px; height: 400px"></dk-divider>
					<div class="clalineoutcall attribution">
						<div ref="refattribution" style="height: 100%">123132</div>
						<div>
							<t-pagination class="pag" :total="30" showPageNumber :showPageSize="false" :totalContent="false" size="small"/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import * as echarts from 'echarts';
import {
	callout,
	figureitemtu,
	figureitemtutow,
	figureitemtuthree,
	intention,
	rounds,
	callduration,
	callstatus,
	processnode,
	knowbase,
	customtags,
	operator,
	attribution
} from '../echarts/analysis.js';

const list = ref([
	{
		up: '导入客户数',
		upnum: '1',
		bottom: '',
		bottomnum: ''
	},
	{
		up: '已外呼名单数',
		upnum: '8',
		bottom: '已外呼总数',
		bottomnum: '20'
	},
	{
		up: '接听名单数',
		upnum: '65',
		bottom: '接通率',
		bottomnum: '80'
	},
	{
		up: '速挂数量',
		upnum: '5',
		bottom: '速挂率',
		bottomnum: '10'
	},
	{
		up: '接听总时长',
		upnum: '200',
		bottom: '平均接听时长',
		bottomnum: '60'
	},
	{
		up: 'A/B意向数',
		upnum: '40',
		bottom: 'A/B意向率',
		bottomnum: '67'
	}
]);

// 时间快捷键
const now = new Date(); //获取当前时间
const startOfWeek = new Date(now); //计算本周一的时间
const dayOfWeek = now.getDay(); // 获取当前是星期几，0 表示星期天
const diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // 如果是星期天，回退到前一个星期一
startOfWeek.setDate(now.getDate() - diff);
startOfWeek.setHours(0, 0, 0, 0); // 设置为本周一的00:00:00
const presets = reactive({
	//时间快捷键
	今天: [new Date(), new Date()],
	昨天: [new Date(+new Date() - 86400000), new Date(+new Date() - 86400000)],
	本周: [startOfWeek, new Date()],
	本月: [new Date(new Date().getFullYear(), now.getMonth(), 1, 0, 0, 0, 0), new Date()],
	近7天: [new Date(+new Date() - 86400000 * 6), new Date()],
	近30天: [new Date(+new Date() - 86400000 * 29), new Date()]
});
// 限制选择时间的范围
const disDate = ref({
	before: new Date(+new Date() - 86400000 * 47),
	after: new Date(+new Date() + 86400000 * 46)
});

const nowtime = ref([]);

const refcallout = ref(null);
const reffigureitemtu = ref(null);
const reffigureitemtutow = ref(null);
const reffigureitemtuthree = ref(null);
const refintention = ref(null);
const refrounds = ref(null);
const refcallduration = ref(null);
const refcallstatus = ref(null);
const refcustomtags = ref(null);
const refprocessnode = ref(null);
const refknowbase = ref(null);
const refoperator = ref(null);
const refattribution = ref(null);
onMounted(() => {
	const Chartcallout = echarts.init(refcallout.value);
	const Chartfigureitemtu = echarts.init(reffigureitemtu.value);
	const Chartfigureitemtutow = echarts.init(reffigureitemtutow.value);
	const Chartfigureitemtuthree = echarts.init(reffigureitemtuthree.value);
	const Chartintention = echarts.init(refintention.value);
	const Chartrounds = echarts.init(refrounds.value);
	const Chartcallduration = echarts.init(refcallduration.value);
	const Chartcallstatus = echarts.init(refcallstatus.value);
	const Chartcustomtags = echarts.init(refcustomtags.value);
	const Chartprocessnode = echarts.init(refprocessnode.value);
	const Chartknowbase = echarts.init(refknowbase.value);
	const Chartoperator = echarts.init(refoperator.value);
	const Chartattribution = echarts.init(refattribution.value);
	callout(Chartcallout);
	figureitemtu(Chartfigureitemtu);
	figureitemtutow(Chartfigureitemtutow);
	figureitemtuthree(Chartfigureitemtuthree);
	intention(Chartintention);
	rounds(Chartrounds);
	callduration(Chartcallduration);
	callstatus(Chartcallstatus);
	customtags(Chartcustomtags);
	processnode(Chartprocessnode);
	knowbase(Chartknowbase);
	operator(Chartoperator);
	attribution(Chartattribution);
});
</script>

<style scoped lang="scss">
.analy {
	.analytop {
		.formBox {
			padding: 0 20px;
			:deep(.t-form) {
				padding: 20px 0 20px 0;
				.t-form-inline {
					row-gap: 16px !important;
				}
				.t-form__item {
					width: 25%;
					height: 28px;
					margin-right: 0 !important;
					padding-right: 10px;
					.t-range-input {
						height: 28px;
					}
					.t-form__label--right {
						text-align: left;
						padding-right: 0;
						font-size: 12px;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.9);
					}
					.t-select__wrap {
						.t-input {
							height: 28px;
						}
					}
				}
				.t-form__item:nth-child(7) {
					padding-right: 0;
				}
				.seats_q {
					.t-select__wrap {
						height: 28px;
						.t-select-input {
							height: 28px;
							.t-tag-input .t-input {
								min-height: 28px;
								.t-tag {
									height: 20px;
								}
							}
						}
					}
				}
				.formHandleBox {
					margin-left: auto;
					text-align: right;
					padding-right: 0;
					.t-space {
						margin-left: auto;
						justify-content: center;
						align-items: center;
						.queryBtn {
							border: none;
							width: 56px;
							height: 30px;
							opacity: 1;
							border-radius: 3px;
							background: rgba(30, 117, 254, 1);
							font-size: 12px;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
							text-align: center;
						}
						.resetBtn {
							width: 56px;
							height: 30px;
							opacity: 1;
							border-radius: 3px;
							background: rgba(236, 242, 254, 1);
							border: 0.5px solid rgba(30, 117, 254, 1);
							font-size: 12px;
							font-weight: 400;
							color: rgba(30, 117, 254, 1);
							text-align: center;
						}
						.arrowCont {
							display: flex;
							justify-content: center;
							align-items: center;
							span {
								font-size: 12px;
								font-weight: 500;
								color: rgba(138, 138, 138, 1);
							}
							.arrowTD-svg-icon {
								height: 16px;
								width: 16px;
								cursor: pointer;
							}
						}
					}
					.t-form__controls {
						margin-left: 0 !important;
					}
				}
			}
			.upArrow {
				text-align: right;
				height: 20px;
				.arrowTD-svg-icon {
					height: 16px;
					width: 16px;
					cursor: pointer;
				}
			}
		}
	}
	.analycontent {
		.overview {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 15vh;
			min-height: 133px;
			.overviewitem {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				// background-color: #fff2f6;
				min-width: 180px;
				box-shadow: 0px 0px 5px 2px rgb(231, 231, 231);
				padding: 0 10px;
				// width: 10vw;
				span {
					font-weight: 400;
					font-size: 14px;
					color: #989eaa;
				}
				div {
					font-size: 22px;
				}
				.somlnum {
					font-size: 16px;
				}
			}
		}
		.echartsBox {
			font-size: 14px;
			font-weight: 400;
			margin-top: 60px;
			.echartsitem {
				display: flex;

				.clalineoutcall {
					// background-color: #e8e8e8;
					width: 100%;
					height: 400px;
				}
				.attribution {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.pag {
						width: 100%;
						// position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						display: flex;
						justify-content: center;
						padding: 0;
					}
				}
				.figurebox {
					display: flex;
					.figureleft {
						width: 40%;
						.figureitem {
							padding: 10px;
							display: flex;
							justify-content: space-between;
							height: 90px;
							margin-bottom: 10px;
							.figureitemtu {
								width: 90px;
							}
							.figureitemnum {
								margin: 8px 0;
								font-size: 18px;
								font-weight: 700;
							}
						}
						.onegradients {
							background: linear-gradient(-30deg, #f0f3f7, #fff);
							border: 1px solid #f0f3f7;
						}
						.threegradients {
							background: linear-gradient(-50deg, #eaf4f6, #fff);
							border: 1px solid #eaf4f6;
						}
					}
					.figureright {
						width: 60%;
					}
				}
			}
		}
	}
}
</style>
